<template>
	<view id="home">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<text class="welcome">欢迎您，{{ username }}</text>
			</view>
		</view>
		<view class="project">
			<text>项目搜索</text>
			<button type="primary" size="mini" @click="drawerToggle('open')"><uni-icons type="search" color="#fff" size="14" /></button>
		</view>
		<view class="uni-list">
			<view class="list-item" v-for="(item, index) in listData" :key="item.id">
				<view class="list-item-line title">
					<text class="item-text">{{ item.name }}</text>
					<!-- <uni-badge class="uni-badge-left-margin" :text="22" type="error" /> -->
				</view>
				<view class="list-item-line">
					<text class="sub-text">工程编码</text>
					<text class="sub-text u-margin-left-40">{{ item.code }}</text>
				</view>
				<view class="list-item-line">
					<text class="sub-text">检测工程号</text>
					<text class="sub-text u-margin-left-40">{{ item.number }}</text>
				</view>
				<view style="display: flex;justify-content: flex-end;">
					<uni-tag text="点击进入" class="u-margin-top-15" type="primary" size="small" @click="view(item)" />
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />

		<uni-popup ref="tipPopup" :mask-click="false" backgroundColor="#fff">
			<view class="popup-tip" v-if="osName == 'Android'">
				<text>应用程序有更新，请点击<text style="color: #409EFF;" @click="downloadFile">此处</text>下载</text>
				<view class="progress-box" v-if="progress > 0">
				  <progress :percent="progress" show-info stroke-width="3" />
				</view>
			</view>
			<view class="popup-tip" v-else>
				<text>应用程序有更新，请前往appstore下载</text>
			</view>
		</uni-popup>
		<uni-drawer ref="queryDrawer" :width="300" :maskClick="false" mode="right">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="drawer-box">
					<uni-section title="条件搜索" type="line" style='margin-bottom: 30rpx;'></uni-section>
					<uni-list>
						<uni-list-item>
							<template v-slot:header>
								<text class="slot-box">项目名称</text>
							</template>
							<template v-slot:body>
								<text style="width: 10px;"></text>
							</template>
							<template v-slot:footer>
								<uni-easyinput v-model="queryParams.name" :inputBorder="false" placeholder="请输入项目名称" />
							</template>
						</uni-list-item>
					</uni-list>
					<button @click="handleInitialize" type="primary" class="u-margin-20">查询</button>
					<button @click="drawerToggle('close')" type="default" class="u-margin-20" style="background-color: #fff;">取消</button>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import {decrypt} from '@/common/jsencrpty.js'
	
	import {
		projectList,
		getVersion
	} from '@/api/index'
	import {
		downFile
	} from '@/common/urlDownLoad'
	import urlConfig from '@/common/urlConfig.js'

	export default {
		data() {
			return {
				progress: 0,
				downUrl: '',
				osName: '',
				username: '',
				listData: [],
				queryParams: {
					name: '',
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
			}
		},
		onLoad() {
			this.osName = plus.os.name
			this.checkVersion()
			this.username = decrypt(uni.getStorageSync('userInfo').nickName)
		},
		onReady() {
			this.getList()
		},
		onReachBottom() {
			if (this.status != 'noMore') {
				this.reload = true
				this.status = 'more'
				this.queryParams.pageNum++
				this.getList()
			}
		},
		methods: {
			// 下载程序
			downloadFile() {
				if (this.progress == 0) {
					let dtask = plus.downloader.createDownload(
						this.downUrl, {},
						(d, status) => {
							// 下载完成，打开文件
							if (status == 200) {
								plus.runtime.openFile(d.filename);
							} else {
								uni.showToast('下载失败')
					 	}
					 }
					);
					
					// 这里是监听下载进度，可以自己生成进度条
					dtask.addEventListener("statechanged", (task, status) => {
						if (!dtask) {
							return;
						}
						switch (task.state) {
							case 3: // 已接收到数据
								this.progress = (((task.downloadedSize / task.totalSize) * 100).toFixed(2));
								break;
							case 4:
								dtask = null;
								uni.showToast('下载完成，正在打开文件');
								break;
						}
					});
					
					// 开始下载
					dtask.start();
				}
			},
			// 验证版本号是否过期
			checkVersion() {
				getVersion().then(res => {
					let version = null
					plus.runtime.getProperty(plus.runtime.appid, (info) => {
						version = info.version;
						this.downUrl = res.data.android
						if (res.data.version > version) {
							this.$nextTick(() => {
								this.$refs.tipPopup.open('center')
							})
						}
					});
					
				})
			},
			getList() {
				this.status = 'loading'
				projectList(this.queryParams).then(res => {
					console.log(res.rows)
					this.reload = false
					this.listData = this.listData.concat(res.rows)
					this.queryParams.total = res.total
					if (this.queryParams.pageNum * this.queryParams.pageSize >= res.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
				})
			},
			async view(row) {
				let obj = {
					id: row.id,
					name: row.name,
					longitude: row.longitude,
					latitude: row.latitude,
					locationVOList:row.locationVOList,
					bim: false,
					panoramic: false
				}
				if (row.bimConfig) {
					obj.bim = true
				}
				if (row.panoramicConfig) {
					obj.panoramic = true
				}
				this.$store.dispatch('SetProjectInfo', obj)
				uni.navigateTo({
					url: '/pages/menu/index'
				})
			},
			onNavigationBarButtonTap(e) {
				this.$store.dispatch('Logout')
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			onBackPress(e) {
				this.$store.dispatch('Logout')
				uni.navigateTo({
					url: '/pages/login/index'
				})
				return true
			},
			// 打开右侧查询抽屉
			drawerToggle(type) {
				if (type == 'open') {
					this.$refs.queryDrawer.open();
				} else {
					this.$refs.queryDrawer.close();
				}
			},
			handleInitialize(){
				this.queryParams.pageNum = 1
				this.listData = []
				this.getList()
				this.$refs.queryDrawer.close();
			},
		}
	}
</script>
<style lang="scss" scoped>
	#home {
		min-height: 100vh;
		background-color: #fafafa;

		.home-header {
			width: 100vw;
			height: 44px;
			display: flex;
			position: relative;
			align-items: center;
			background-color: #fff;
			justify-content: center;

			text {
				font-size: 16px;
				font-weight: 700;
			}

			.logout {
				top: 14px;
				right: 12px;
				color: #333333;
				font-size: 14px;
				position: absolute;
				font-weight: normal;
			}
		}

		.nav-box {
			width: 100vw;
			height: 160px;
			margin-top: -44px;
			padding: 56px 20px 56px 20px;
			background-image: url(../../static/img/home/head-bg.png);

			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;

				.person {
					width: 48px;
					height: 48px;
				}

				.welcome {
					color: #333;
					font-size: 32rpx;
					font-weight: 700;
					margin-left: 40rpx;
				}
			}
		}

		.uni-list {
			padding: 20px;
			margin-top: -20px;

			.list-item {
				padding: 10px;
				margin-top: 10px;
				min-height: 50px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);

				.list-item-line {
					height: 36px;
					display: flex;
					position: relative;
					align-items: center;
					border-bottom: 1rpx solid #bfbfbf;

					.item-text {
						overflow: hidden;
						font-weight: 700;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.sub-text {
						color: #999;
					}

					.short {
						letter-spacing: 32px;
					}
				}

				.title {
					justify-content: space-between;
				}
			}
		}
		
		/deep/ .uni-progress-info {
			width: 40px;
		}
	}

	.popup-tip {
		padding: 20px;
	}
	
	.project {
		padding: 10px;
		display: flex;
		border-radius: 8px;
		align-items: center;
		background-color: #fff;
		margin: -32px 20px 0 20px;
		justify-content: space-between;
		box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
	
		text {
			font-size: 14px;
			font-weight: 700;
		}
		/deep/ uni-button {
			margin: 0;
			flex: 0 0 auto;
			padding: 2px 4px;
			line-height: normal;
		}
	}
	.drawer-box {
		height: 100vh;
		background-color: #f8f8f8;
	
		.uni-section {
			margin: 0;
			height: 90rpx;
		}
		.uni-input {
			color: #888;
		}
		.tree-select {
			flex: 1;
			color: #888;
			font-size: 14px;
			padding-left: 10px;
		}
		/deep/ .uni-easyinput__content {
			min-height: 10px;
		}
		/deep/ .uni-date__x-input {
			padding: 0;
			height: 10px;
			font-size: 12px;
			line-height: 10px;
	
			.uni-input-input {
				width: 80px;
			}
		}
		/deep/ .uni-date__icon-clear {
			top: 1px;
			margin: 0;
			border: 0;
		}
	}
</style>
